<%--
  Created by IntelliJ IDEA.
  User: csnf
  Date: 2024/11/26
  Time: 10:54
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <!-- 可以在这里添加外部CSS文件链接或者直接写一些内联CSS样式来美化页面 -->
    <style>
        /* 整体页面的基础样式设置 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4; /* 页面背景色，选择一个淡灰色，使页面看起来更柔和 */
            margin: 0;
            padding: 0;
        }

        /* 页面主要内容区域的容器样式，设置一定的内边距和最大宽度，使其在不同屏幕尺寸下有较好的显示效果 */
        .main-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff; /* 内容区域背景色为白色，与页面背景形成对比 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加一个淡淡的阴影效果，增加立体感 */
        }

        /* 图片样式 */
        img {
            width: 60px;
            height: 60px;
            border-radius: 50%; /* 设置为圆形头像效果（假设图片是正方形的） */
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 添加一点阴影效果 */
            object-fit: cover; /* 确保图片按比例填充圆形区域，裁剪多余部分 */
        }

        /* 标题样式 */
        h1 {
            color: #333; /* 标题颜色 */
            text-align: center; /* 标题居中 */
            margin-top: 20px;
            margin-bottom: 30px;
            font-size: 24px; /* 增大标题字体大小 */
            text-transform: uppercase; /* 将标题文字转为大写，增加正式感 */
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse; /* 合并边框，让表格更简洁美观 */
            margin-top: 20px;
        }

        table th,
        table td {
            border: 1px solid #ccc; /* 表格边框颜色 */
            padding: 12px; /* 增加单元格内边距，使内容看起来更舒适 */
            text-align: center; /* 内容居中 */
            font-size: 16px; /* 设置表格内容字体大小 */
        }

        table tr:nth-child(even) {
            background-color: #f9f9f9; /* 偶数行添加背景色，形成斑马线效果 */
        }

        /* 管理员昵称段落样式 */
        p.admin-nickname {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 20px;
            color: #555; /* 昵称颜色，选择一个稍深一点的灰色，使其更突出但不过于刺眼 */
        }
    </style>
    <script>
        // 获取所有的删除链接元素
        const deleteLinks = document.querySelectorAll('a[href^="deleteUser?"]');
        // 遍历每个删除链接元素，添加点击事件监听器
        deleteLinks.forEach(link => {
            link.addEventListener('click', function (event) {
                // 阻止默认的链接跳转行为，先弹出确认框
                event.preventDefault();
                const isConfirmed = confirm("是否确定删除该用户？");
                if (isConfirmed) {
                    // 如果用户点击了确认（确定），则按照原链接进行跳转，执行删除操作
                    window.location.href = this.href;
                }
            });
        });
    </script>
</head>
<body>
<!-- 页面主要内容区域的容器开始 -->
<div class="main-content">
    <!-- 显示管理员头像 -->
    <img src="imgs/${admin.admin_profile_picture_src}" alt="${admin.admin_nickname}'s Profile Picture">

    <!-- 显示管理员昵称 -->
    <p class="admin-nickname">${admin.admin_nickname}</p>
    <form action="gteUser">
        <input type="text" name="qeruyName" placeholder="昵称">
        <input type="submit">
    </form>

    <table border="1">
        <tr>
            <th>编号</th>
            <th>账号</th>
            <th>昵称</th>
            <th>操作</th>
        </tr>
        <!-- 循环遍历用户列表并展示用户信息 -->
        <c:forEach var="user" items="${userList}">
            <tr>
                <td>${user.user_id}</td>
                <td>${user.user_name}</td>
                <td>${user.user_nickname}</td>
                <td>
                    <a href="deleteUser?user_id=${user.user_id}">删除</a>
                    <a href="editeUser?user_id=${user.user_id}">修改</a>
                </td>
            </tr>
        </c:forEach>
    </table>
</div>
<!-- 页面主要内容区域的容器结束 -->
</body>
</html>